<template>
    <div class="instructions">
        <HeaderA :type=" $route.params.type === '0' ? 'word-to-voice' : 'voice-to-word'"/>
        <div class="in1">
            <div class="in11 mar-center">

                <div class="in12">
                    <span class="in13" v-if="$route.params.type === '0'" @click="nav(1)">文字转语音</span>
                    <span class="in13" v-else @click="nav(2)">语音转文字</span>
                    <span> > </span>
                    <span>使用说明</span>
                </div>
                <img src="../assets/img/27.png"/>
            </div>
        </div>
        <Bottom/>
    </div>
</template>

<script>
import HeaderA from "@/components/child/Header";
import Bottom from "@/components/Bottom";

export default {
    name: "Instructions",
    components: { HeaderA, Bottom },
    methods: {
        nav (type) {
            switch (type) {
                case 1:
                    this.$router.push('/word-to-voice')
                    break;
                case 2:
                    this.$router.push('/voice-to-word')
                    break;
            }
        }
    }
}
</script>

<style scoped lang="scss">
.instructions{
    .in1{
        padding-top: 96px;
        padding-bottom: 70px;
        background-color: #F8FBFA;
        .in11{
            width: 59.58%;
            img{
                width: 100%;
            }
        }
        .in12{
            height: 20px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 30px;
            .in13{
                cursor: pointer;
            }
        }
    }
}
</style>